<!DOCTYPE html>
<html>
	<head>
		<title>旋转风车</title>
	</head>
	<body>
		<h1>旋转风车</h1>
		<canvas id="fans" width="400" height="400"></canvas>
		<script type="text/javascript">
		    var canvas =document.getElementById(fans);
            var context=fans.getContext("2d") 
            	        // 渐变色
                var g1=context.createLinearGradient(0,0,100,0);
                g1.addColorStop("0","purple");
                g1.addColorStop("0.5","green");
                context.fillStyle=g1;
                context.fillRect(0,0,400,400);
		    width=400;
		    height=400;
	        var deg=0;
		    function redraw()
		    {  
                   //画最大圆
                context.beginPath(); 
                context.fillStyle="black";
                context.arc(width/2,height/2,150,0+deg,Math.PI*2+deg,false);
                context.closePath();
                context.fill();		        
		          //画大圆
                context.beginPath(); 
                context.fillStyle="gold";
                context.linewidth=0.1;
                context.arc(width/2,height/2,120,0+deg,Math.PI*2+deg,false);
                context.stroke();
                context.closePath();
                context.fill();
                //画白圆
          	    context.beginPath(); 
                context.fillStyle="white";
                context.arc(width/2,height/2,100,0+deg,Math.PI*2+deg,false);
                context.closePath();
                context.fill();
                //画小圆
                context.beginPath(); 
                context.fillStyle="grey";
                context.arc(width/2,height/2,10,0+deg,Math.PI*2+deg,false);
                context.closePath();
                context.fill();
		     
               //画扇形上
                context.beginPath();
                context.fillStyle="red";
                context.moveTo(width/2,height/2);
                context.arc(width/2,height/2,80,Math.PI*1.9+deg,Math.PI*0.1+deg,false);
                context.closePath();
                context.fill();
                //画扇形右
                context.beginPath();
                context.fillStyle="gold";
                context.moveTo(width/2,height/2);
                context.arc(width/2,height/2,80,Math.PI*1.4+deg,Math.PI*1.6+deg,false);
                context.closePath();
                context.fill();
                //画扇形左
                context.beginPath();
                context.fillStyle="blue";
                context.moveTo(width/2,height/2);
                context.arc(width/2,height/2,80,Math.PI*0.9+deg,Math.PI*1.1+deg,false);
                context.closePath();
                context.fill();
                 //画扇形下
                context.beginPath();
                context.fillStyle="green";
                context.moveTo(width/2,height/2);
                context.arc(width/2,height/2,80,Math.PI*0.4+deg,Math.PI*0.6+deg,false);
                context.closePath();
                context.fill();
                //deg-=0.1
            }
                setInterval(redraw,20);  
		</script>	
	</body>
</html>
